<template>
    <div class="page">
        <div class="page_header" style="display: flex;">
            <div style="flex: 1 1 auto">
                <el-form ref="searchForm" :model="searchForm" style="display: flex;">
                    <el-form-item prop="verified">
                        <el-radio-group v-model="searchForm.verified" @change="$store.dispatch('tableReload')" style="width: 270px;">
                            <el-radio-button :label="0">待审核</el-radio-button>
                            <el-radio-button :label="1">已认证</el-radio-button>
                            <el-radio-button :label="2">未通过</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item prop="shop_id">
                        <el-input v-model="searchForm.shop_id" placeholder="店铺id"></el-input>
                    </el-form-item>
                    <el-form-item prop="shop_name">
                        <el-input v-model="searchForm.shop_name" placeholder="店铺名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="contact_man">
                        <el-input v-model="searchForm.contact_man" placeholder="联系人"></el-input>
                    </el-form-item>
                    <el-form-item prop="contact_phone">
                        <el-input v-model="searchForm.contact_phone" placeholder="店铺电话"></el-input>
                    </el-form-item>
                    <el-form-item prop="openid">
                        <el-input v-model="searchForm.openid" placeholder="openid"></el-input>
                    </el-form-item>
                    <el-form-item prop="nickname">
                        <el-input v-model="searchForm.nickname" placeholder="微信昵称"></el-input>
                    </el-form-item>
                    <el-form-item prop="phone">
                        <el-input v-model="searchForm.phone" placeholder="联系电话"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div style="flex:0 0 auto;">
                <el-button @click="$store.dispatch('tableReload')" type="primary">查询</el-button>
                <el-button @click="$store.dispatch('tableReset')">重置</el-button>
            </div>
        </div>
        <el-card class="page_body">
            <el-table
                    height="10"
                    class="page_body_table"
                    :data="common.tableData"
                    v-loading="common.loading"
                    border
                    stripe
                    style="width: 100%">
                <el-table-column prop="shop_id" width="80" label="店铺id"></el-table-column>
                <el-table-column prop="shop_name" width="180" label="店铺名称">
                    <template slot-scope="scope">
                        <el-button type="text" @click="$refs.shopDetail.init(scope.row.shop_id)">{{scope.row.shop_name}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="key_word" label="关键词"></el-table-column>
                <el-table-column prop="shop_type_name" width="80" label="店铺类型"></el-table-column>
                <el-table-column prop="contact_man" width="100" label="联系人"></el-table-column>
                <el-table-column prop="contact_phone" width="120" label="店铺电话"></el-table-column>
                <el-table-column prop="short_name" label="地址区域"></el-table-column>
                <el-table-column prop="address" label="详细地址"></el-table-column>
                <el-table-column prop="platform" label="店铺平台"></el-table-column>
                <el-table-column prop="nickname" label="微信昵称"></el-table-column>
                <el-table-column prop="phone" width="120" label="联系电话"></el-table-column>
                <el-table-column prop="openid" width="240" label="openid"></el-table-column>
            </el-table>
            <pagination class="page_body_pagination"></pagination>
        </el-card>
        <shop-detail-dialog ref="shopDetail" @refresh="$store.dispatch('tableReload')"></shop-detail-dialog>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    import Pagination from "../Pagination";
    import ShopDetailDialog from "./Dialog/ShopDetailDialog";
    export default {
        name: "Shop",
        computed:{
            ...mapState(['common','laifei']),
        },
        components: {
            Pagination,
            ShopDetailDialog,
        },
        data(){
            return{
                method:'post',
                url:'/api/laifei/shop/store',
                searchForm:{
                    shop_id:'',
                    shop_name:'',
                    contact_man:'',
                    contact_phone:'',
                    openid:'',
                    nickname:'',
                    phone:'',
                    verified:1,
                },
            }
        },
        created() {
            this.$store.dispatch('pageInit', this);
        },
    }
</script>

<style scoped>

</style>
